<template>
  <el-container>
    <el-header>
      <div class="report_header" ref="headerHeight">
        <div class="report_header_left"></div>
        <div style="display: flex;flex-direction: row;justify-content:space-between;width: 100%;">
          <div style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;height:41px;justify-content: flex-end;">
            <div class="report_header_date">
              <el-date-picker
              style="width: 100%;"
                v-model="query.date"
                value-format="yyyy-MM-dd"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </div>
            <div class="report_header_query">
              <queryShop @queryShopClick='queryShopClick'></queryShop>
            </div>
            <div class="report_header_query">
              <querySupplier @querySupplierClick="querySupplierClick"></querySupplier>
            </div>

            <div class="report_header_query" style="width:120px;">
              <el-select v-model="paymentPluginId" clearable placeholder="付款方式">
                <el-option label="人工打款" value="transferPluginId"></el-option>
                <el-option label="微信零钱" value="weixinPayPlugin"></el-option>
                <el-option label="支付宝" value="alipayPayPlugin"></el-option>
                <el-option label="税优代付" value="ahyunzxPlugin"></el-option>
                <el-option label="京灵发佣" value="jddWalletPlugin"></el-option>
                <el-option label="银行卡" value="bankPayPlugin"></el-option>
              </el-select>
            </div>
          </div>
          <div>
          <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="queryPayment">查询</el-button>
          <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="creadPayment">新增</el-button>
            <ExportList2Excel style='margin-left: 10px;margin-top: 5px;' ref="exportList2Excel" @handleExport="handleExport" name="导出" />
          </div>
        </div>
      </div>
    </el-header>
    <div class="pd10">
        <el-tabs v-model="activeName" @tab-click="handleClick"  type="border-card">
        <el-tab-pane label="等待付款" name="first">
          <div class="details_card"  v-loadMore="[payLoads,'transfer-list']" :style="{height:curHeight+'px'}">
            <transferList :transfer="transfer" @detailsClick="detailsClick"></transferList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="确认付款" name="second">
          <div class="details_card"  v-loadMore="[payLoads,'transfer-list']" :style="{height:curHeight+'px'}">
            <transferList :transfer="transfer" @detailsClick="detailsClick"></transferList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="付款完成" name="third">
           <div class="details_card"  v-loadMore="[payLoads,'transfer-list']" :style="{height:curHeight+'px'}">
            <transferList :transfer="transfer" @detailsClick="detailsClick"></transferList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="付款失败" name="fourth">
          <div class="details_card"  v-loadMore="[payLoads,'transfer-list']" :style="{height:curHeight+'px'}">
            <transferList :transfer="transfer" @detailsClick="detailsClick"></transferList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="取消付款" name="fire">
          <div class="details_card"  v-loadMore="[payLoads,'transfer-list']" :style="{height:curHeight+'px'}">
            <transferList :transfer="transfer" @detailsClick="detailsClick"></transferList>
          </div>
        </el-tab-pane>
        </el-tabs>

    </div>
    <el-dialog
      title="双击选择客户"
      :visible.sync="memberTableVisible"
      width="950px"
      v-el-drag-dialog
      append-to-body
      :before-close="memberTableClose">
      <div style="position: relative;">
        <member-table :key="times" @memberDouble="memberDouble" @memberTableClose="memberTableClose"></member-table>
      </div>
    </el-dialog>
    <el-footer class="el-footerBox">
      <pagination  :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                   @pagination="loadTransfer"></pagination>
    </el-footer>
  </el-container>
</template>

<script>
  import memberTable from '@/components/MemberTable/index'
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import {EventBus} from "@/api/eventBus";
  import loadMore from '@/utils/more.js'
  import { list } from '../../../api/transfer'
  import Pagination from '@/components/Pagination';
  import transferList from './components/list'
  import {list as memberList} from '@/api/member'
  import ExportList2Excel from "@/components/ExportList2Excel";
  import utils from '../../../utils/utils.js'
  import queryShop from '@/components/Query/queryShop'
  import querySupplier from '@/components/Query/querySupplier'
  export default {
    name: 'transfer-payable-list',
    directives: {loadMore,elDragDialog},
    activated() {
      this.payLoads = new Date().getTime();
    },
    data(){
      return{
        memberName:'',
        paymentPluginId:'',
        printing:5000,
        status:0,
        activeName:"first",
        payLoads:'',
        queryType: true,
        curHeight: null,
        total:0,
        memberTableVisible:false,
        times:'',
        query: {
          orderStatus: '',
          date: [],
          title: '',
          supplierId: '',
          shopId: ''
        },
        pageNum:1,
        pageSize:20,
        keyword: {
          orderStatus: '',
          date: [],
          supplierId: '',
          shopId: ''
        },
        members: [],
        transfer:[],
        pickerOptions: {//时间快捷选择
          shortcuts: [{
            text: '昨天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    },
    components:{
      Pagination,transferList,memberTable,ExportList2Excel,queryShop,querySupplier
    },
    created() {
      EventBus.$on('transfer-payable-details', res => { // 监听状态更新
        for (var i = 0; i < this.transfer.length; i++) {
          if (this.transfer[i].id == res.id) {
            this.$set(this.transfer, i, res)
          }
        }
      })

    },
    mounted(){
      this.loadTransfer()
      this.comeIn();
      this.beforeMount()
    },
    methods:{
      //下载模板的函数
      handleExport() {
        let _this= this
        var  loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        let data ={}
        data.tHeader = [ '创建日期',  "付款单号","付款方式",        "供应商","联系电话" ,    "开户行"           ,"开户名" ,   "收款人卡号","付款状态",  "金额", "手续费",  "应付金额"     ,   "团队" ,"团队账号"  ]
        data.filterVal = ['createDate',"sn","paymentPluginName","supplierName","supplierMobile",     'bankInfoName'  ,"bankName"     ,  "bankCode","status",  "amount",  "fee",   "receivable"  , "team" ,"teamUser"]
        data.filename = "付款单明细表";
        let params = new URLSearchParams();
        params.append('pageNum', this.pageNum);
        params.append('type', 0);
        params.append('pageSize', this.printing);
        params.append('paymentPluginId', this.paymentPluginId);
        params.append('startDate',this.keyword.date.length >0?this.keyword.date[0]:'');
        params.append('endDate', this.keyword.date.length >0?this.keyword.date[1]:'');
        params.append('shopId', this.query.shopId)
        params.append('supplierId', this.query.supplierId)
        params.append('status', this.status)
        list(params).then(res => {
          data.list=res.data.data
          data.list.forEach(item=>{
            item.createDate = utils.dateFormatter(item.createDate)
            item.paymentDate = utils.dateFormatter(item.paymentDate)
            item.status =  this.watchStatus(item.status)
          })
          _this.$refs.exportList2Excel.handleDownload(data);
          loading.close();
          if(data.list.length==this.printing){
            _this.pageNum++
            _this.handleExport()
          }
          else{
            return;
          }
        }).catch(error=>{
          _this.$refs.exportList2Excel.unlockLoading()
          loading.close();
        })
      },
      watchStatus(val){
        if (val == 0){
          return '等待付款'
        } else if (val == 1){
          return '确认付款'
        }else if (val == 2){
          return '付款完成'
        } else if (val == 3){
          return '付款失败'
        }else if (val == 4){
          return '取消付款'
        }
      },
      queryShopClick(data) {
        console.log(data)
        this.query.shopId = data.shopId
        this.shopname=data.name
      },
      querySupplierClick(data){
        console.log("55666666666666666");
        console.log(data);
        if (utils.isNull(data.suppName)){
          this.suppName=''
        }else{
          this.suppName=data.suppName
        }

        if (utils.isNull(data.supplierId)){
          this.query.supplierId=''
        }else{
          this.query.supplierId=data.supplierId
        }
      },

      handleClick(data){
       switch(data.name) {
          case 'first':
            this.status=0
          break;
          case 'second':
            this.status=1
          break;
          case 'third':
            this.status=2
          break;
          case 'fourth':
            this.status=3
          break;
          case 'fire':
            this.status=4
          break;

       }
       this.loadTransfer()
      },
      creadPayment(){
        this.$router.push({
          path:'/payable/add'
        })
      },

      resetClick(){
        this.query.date = [];
        this.memberName=''
        this.query.supplierId = ""
        this.query.shopId = ""
        this.shopName = ""
        this.suppName = ""
        this.keyword = this.query;
        this.pageNum = 1;
        this.loadTransfer()
      },
      queryPayment(){
        this.keyword = this.query;
        this.pageNum = 1;
        this.loadTransfer()
      },
      detailsClick(data){
        this.$router.push({
          path:'/transfer/payable/view',query:{id:data}
        })
      },
      loadTransfer(){
        var _this = this
        if(utils.isNull(this.keyword.date)){
          this.keyword.date = []
        }
        let params = new URLSearchParams();
        params.append('pageNum', this.pageNum);
        params.append('pageSize', this.pageSize);
        params.append('type', 0);
        params.append('paymentPluginId', this.paymentPluginId)
        params.append('startDate',this.keyword.date.length >0?this.keyword.date[0]:'');
        params.append('endDate', this.keyword.date.length >0?this.keyword.date[1]:'');
        params.append('shopId', this.query.shopId)
        params.append('supplierId', this.query.supplierId)
        params.append('status', this.status)
        list(params).then(response=>{
          this.total=response.data.total
          this.transfer=response.data.data
        })
      },
      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            if (_this.queryType == false) {
              var h = document.documentElement.clientHeight || document.body.clientHeight;
              _this.curHeight = h - 300//减去页面上固定高度height
            } else {
              var h = document.documentElement.clientHeight || document.body.clientHeight;
              _this.curHeight = h - 254//减去页面上固定高度height
            }
          })();
        };
      },
      comeIn() {
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 300//减去页面上固定高度height
      },
      chooseClick() {
        this.queryType = !this.queryType
        if (this.queryType == false) {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          this.curHeight = h - 270//减去页面上固定高度height
        } else {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          this.curHeight = h - 224//减去页面上固定高度height
        }
      },

    }
  }
</script>

<style scoped>
  .details_card{
    overflow: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    border: 1px solid #f2f2f2;
    border-radius: 4px;
  }
  .elOption{
    background-color: #909399;
    color:white ;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 40px
  }
  .details_card:hover{
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }

  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }

  /deep/.el-header {
    padding: 10px;
    padding-bottom: 0;
  }

  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: rgba(248, 248, 248, 0.8);
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
  }
  .report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409EFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .report_header_query {
    margin-left: 10px;
    width: 180px;
    margin-top: 5px;
  }
  .report_header_date {
      margin-left: 10px;
      width: 250px;
      margin-top: 5px;
    }
</style>
